import React, { useState, useEffect, useCallback } from 'react'
import './style.less'
import classNames from 'classnames'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'

const OperationIndustryData: React.FC = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const [tabList] = useState([
    {
      label: '产业数仓配置',
      path: '/operationIndustry/atlas'
    },
    {
      label: '领域配置',
      path: '/operationIndustry/domain'
    }
  ])
  const [tabIndex, settabIndex] = useState(0)

  const tabChange = (item: any, index: number) => {
    settabIndex(index)
    navigate(item.path, {
      state: {
        params: {
          breadType: 'replace'
        }
      }
    })
  }
  const handleActiveTab = useCallback(
    (path: string) => {
      settabIndex(tabList.findIndex((item) => item.path === path))
    },
    [tabList]
  )
  useEffect(() => {
    handleActiveTab(location.pathname)
  }, [handleActiveTab, location])

  return (
    <div className="operation-basics-data">
      {!location.pathname.includes('/atlasDetail') && (
        <div className="tab-box">
          {tabList.map((item, index) => (
            <div key={item.path} className={classNames('item', { listActived: tabIndex === index })} onClick={() => tabChange(item, index)}>
              {item.label}
            </div>
          ))}
        </div>
      )}
      <Outlet />
    </div>
  )
}

export default OperationIndustryData
